<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../public/elementUI/elementUI.css">
    <script src="../public/elementUI/elementUI.js"></script>
    <link href="../public/css/bascis.css" rel="stylesheet" type="text/css" />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <link href="../public/css/header.css" rel="stylesheet" type="text/css" />
    <link href="../public/css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="home">



        <div class="header">
            <div class="content">
                <div class="left">
                    <img src="./image/ctrlD.png" width="20px" height="20px">
                    <a href="javascript:void(0);" rel="sidebar" onclick="AddFavorite('全球华人充值第一平台', location.href)">
                        <a style="color: red;"><b>Ctrl+D</b></a> <a>收藏本站</a>
                    </a>
                </div>
                <div class="mid">
                    <a href="../index/index.html">华人服务商城APP</a>
                </div>
                <div class="right">
                    <!-- 登录 -->
                    <div class="login" v-if="isLogin">
                        <a style="color: #00d7c8;">{{user.email}}</a> | <a @click.stop="logOut">退出</a>
                    </div>
                    <!-- 未登陆 -->
                    <div class="noLogin" v-if="!isLogin">
                        <a @click="gotoLogin">注册</a> | <a @click="gotoLogin">登录</a>
                    </div>

                </div>
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="mid-content">
            <!-- 搜索框 -->
            <div class="search">
                <div class="img">
                    <h3><img src="../public/image/logo.png"></h3>
                </div>
                <div class="search-input">
                    <input placeholder="search"><button><i class="el-icon-search"></i></button>
                </div>
            </div>
            <div class="box">
                <div class="menu">
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1"
                            style="background-color: #00d7c8;border-top-left-radius: 20px;border-top-right-radius: 20px;width: 200px;color: white;font-size: 20px;"
                            @click="toIndex"
                            >
                            首页</el-menu-item>
                            <el-submenu v-for="(item,index) in menuList" :index="index+2+''" :key="index+2">
                                <template #title>{{item.main}}</template>
                                <el-menu-item :index='(index+2)+"-"+(index2+1)' :key='(index+2)+"-"+(index2+1)' v-for="(item2,index2) in item.body" @click="gotoProduct(item2)">{{item2.pname}}</el-menu-item>
                                
                            </el-submenu>
                            <el-menu-item index="8" @click="toIndex">
                                <template #title>联系客服</template>
                            </el-menu-item>
                    </el-menu>
                </div>
                <!-- 个人中心 -->
                <div class="myhome">

                    <el-container>
                        <el-aside width="200px">
                            <!-- 左侧导航 -->
                            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select='selectMenu'>

                                <el-menu-item index="1">
                                    <i class="el-icon-location"></i>
                                    <template #title>账户设置</template>
                                </el-menu-item>

                                <el-menu-item index="2">
                                    <i class="el-icon-menu"></i>
                                    <template #title>我的订单</template>
                                </el-menu-item>

                            </el-menu>
                        </el-aside>
                        <!-- 右侧显示区 -->
                        <el-main>
                            <!-- 账户设置 -->
                            <div class="right-main" v-if='activeIndex=="1"'>
                                <div class="userinfo">
                                    <div class="left">
                                        <b>账户绑定信息：</b>
                                    </div>
                                    <div class="right">
                                        <div><a>账户ID：</a><b>{{user.id}}</b></div>
                                        <div><a>邮箱：</a><b>{{user.email}}</b></div>
                                        <div><a>手机号：</a><b>{{user.tel}}</b></div>
                                    </div>
                                </div>
                                <div class="personalinfo">
                                    <div class="left">
                                        <b>个人信息：</b>
                                    </div>
                                    <div class="right">
                                        <div><a>姓名：</a>
                                            <el-input v-model="input" placeholder="请输入姓名" style="width: 200px;">
                                            </el-input>
                                        </div>
                                        <div><a>性别：</a>
                                            <el-radio v-model="radio" label="1">男</el-radio>
                                            <el-radio v-model="radio" label="2">女</el-radio>
                                        </div>
                                        <div><a>出生日期：</a>
                                            <el-date-picker v-model="value1" type="date" placeholder="选择生日">
                                            </el-date-picker>
                                        </div>

                                        <div class="more-lianxi">
                                            <a>其他联系方式：</a>
                                            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                                                <el-select v-model="select" slot="prepend" placeholder="请选择">
                                                    <el-option label="QQ" value="1"></el-option>
                                                    <el-option label="微信" value="2"></el-option>
                                                    <el-option label="Skype" value="3"></el-option>
                                                    <el-option label="旺旺" value="3"></el-option>

                                                </el-select>

                                            </el-input>

                                        </div>

                                        <el-button type="primary" plain>保存</el-button>
                                    </div>
                                </div>
                                <div class="personalinfo">
                                    <div class="left">
                                        <b>账户密码:</b>
                                    </div>
                                    <div class="right">

                                        <el-button plain>重置密码</el-button> <span>（ 如需更改密码，请点击重置 ）</span>
                                    </div>
                                </div>
                            </div>
                            <!-- 我的订单 -->
                            <div class="right-main my-order" v-if='activeIndex=="2"'>
                                <header>我的订单</header>
                                <div v-if="user.order.length==0" style="text-align: center;">暂无订单</div>
                                <table v-else cellspacing="0" cellpadding="0" class="table-one">
                                    <thead>
                                        <tr class="to-tit">
                                            <th width="50%">商品</th>
                                            <th>订单总额</th>
                                            <th>订单状态</th>
                                            <th>失败原因</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody" v-if="user!==null">
                                        <tr v-for="order in user.order">
                                            <td colspan="5">
                                                <table cellspacing="0" cellpadding="0" class="table-two">
                                                    <tbody>
                                                        <tr>
                                                            <th width="50%">
                                                                <div class="tit3">2021-05-18
                                                                    21:10:01&nbsp;&nbsp;<span>订单号: 12963512</span></div>
                                                            </th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                            <th></th>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <div class="one-box  ">
                                                                    <div class="tab-img">
                                                                        <img :src="order.img">
                                                                    </div>
                                                                    <div class="tab-text">
                                                                        <h4>{{order.pname+" "+order.price+"元 X "+order.sum+"个"}}
                                                                        </h4>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="price"><b>{{"￥"+order.price*order.sum}}</b>
                                                                </div>
                                                            </td>
                                                            <td>已付款</td>
                                                            <td>
                                                                <div class="operation"> </div>
                                                            </td>
                                                            <td>
                                                                <div class="operation"> <a
                                                                        @click="delOrder(order.id)">删除订单</a></div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>

                            </div>

                        </el-main>
                    </el-container>

                </div>



            </div>
        </div>

        <div class="footer">
            <footer>
                <div class="center">
                    <div class="introduce">
                        <div class="logo">
                            <img src="../public/image/logo.png" height="80px">
                        </div>
                        <p>
                            10HKA网站隶属拾小时娱乐有限公司，本公司深耕互联网行业，作为服务平台，10HKA励志服务于全球华人，以“团结、友爱、互助、互信”为公司发展理念。如果您在购物中有任何疑问，请及时联系我们
                        </p>
                        <p><span>QQ:</span>2677950874</p>
                        <p><span>邮箱:</span>2677950874@qq.com</p>
                    </div>
                    <div>
                        <ul>
                            <li>关于我们</li>
                            <li>公司介绍</li>
                            <li>隐私政策</li>
                            <li>条款与条件</li>
                        </ul>
                        <ul>
                            <li>购物指南</li>
                            <li>免费注册</li>
                            <li>购物流程</li>
                            <li>条款与条件</li>
                        </ul>
                        <ul>
                            <li>支付方式</li>
                            <li>支持的货币</li>
                            <li>支付方式</li>
                            <li>Paypal认证</li>
                            <li>Paypal注册</li>
                        </ul>
                        <ul>
                            <li>帮助信息</li>
                            <li>发货流程</li>
                            <li>退款政策</li>
                        </ul>
                    </div>

                </div>
                <div class="my-footer">
                    <p> © 2005-2021 www.okpayka.com 版权所有，并保留所有权利</p>
                    <div>
                        <img src="../public/image/footer/163.jpg" />
                        <img src="../public/image/footer/Apple.jpg" />
                        <img src="../public/image/footer/Booking.jpg" />
                        <img src="../public/image/footer/ctrip.jpg" />
                        <img src="../public/image/footer/PayPal.jpg" />
                    </div>
                </div>

            </footer>
        </div>




    </div>
    <script>
        var app = new Vue({
            el: '#home',
            data() {
                return {
                    activeIndex: '2',
                    radio: '1',
                    input: '',
                    input3: '',
                    value1: '',
                    select: '',
                    isLogin: false, //是否登录
                    user: {
                        order:[]
                    } ,//登录的用户信息
                     //菜单列表
                     menuList: [
                        {
                            main: "直播平台",
                            body: [
                                {
                                    img: "../public/image/goods/13.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '抖音短视频'
                                },
                                {
                                    img: "../public/image/goods/20.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'YY直播'
                                },
                                {
                                    img: "../public/image/goods/9.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '快手直播'
                                },
                                {
                                    img: "../public/image/goods/15.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '虎牙直播'
                                },
                                {
                                    img: "../public/image/goods/4.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '花椒直播'
                                },
                                {
                                    img: "../public/image/goods/10.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '斗鱼直播'
                                }
                            ]
                        },
                        {
                            main: "视频音频",
                            body: [
                                {
                                    img: "../public/image/goods/21.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '猫耳FM'
                                },
                                {
                                    img: "../public/image/goods/18.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '全民K歌'
                                },
                                {
                                    img: "../public/image/goods/22.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'bilibili'
                                },
                                {
                                    img: "../public/image/goods/23.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '喜马拉雅'
                                },
                                {
                                    img: "../public/image/goods/24.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '荔枝FM'
                                },
                                {
                                    img: "../public/image/goods/25.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '唱吧'
                                },
                                {
                                    img: "../public/image/goods/26.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '腾讯视频'
                                },
                                {
                                    img: "../public/image/goods/27.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '优酷视频'
                                },
                            ]
                        },
                        {
                            main: "陪玩陪聊",
                            body: [
                                {
                                    img: "../public/image/goods/28.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '比心APP'
                                },
                                {
                                    img: "../public/image/goods/29.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'TT语音'
                                },
                                {
                                    img: "../public/image/goods/30.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '伴伴APP'
                                },
                                {
                                    img: "../public/image/goods/31.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '鱼丸星球'
                                },
                                {
                                    img: "../public/image/goods/32.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '糖糖语音'
                                },
                                {
                                    img: "../public/image/goods/33.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '玩吧APP'
                                },
                                {
                                    img: "../public/image/goods/34.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '点点开黑'
                                },
                                {
                                    img: "../public/image/goods/35.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '氧气语音'
                                },
                            ]
                        },
                        {
                            main: "APP手游",
                            body: [
                                {
                                    img: "../public/image/goods/36.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '荒野行动'
                                },
                                {
                                    img: "../public/image/goods/37.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '光明勇士'
                                },
                                {
                                    img: "../public/image/goods/38.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '六界天辰'
                                },
                                {
                                    img: "../public/image/goods/39.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '倩女幽魂'
                                },
                                {
                                    img: "../public/image/goods/40.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '传说对决'
                                },
                                {
                                    img: "../public/image/goods/41.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '第五人格'
                                },
                                {
                                    img: "../public/image/goods/42.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '盗梦英雄'
                                }
                               
                            ]
                        },
                      
                        {
                            main: "生活服务",
                            body: [
                                {
                                    img: "../public/image/goods/43.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '宽带缴费'
                                },
                                {
                                    img: "../public/image/goods/44.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '水费'
                                },
                                {
                                    img: "../public/image/goods/45.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '电费'
                                },
                                {
                                    img: "../public/image/goods/46.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '燃气费'
                                },
                                {
                                    img: "../public/image/goods/47.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '预付卡'
                                },
                                {
                                    img: "../public/image/goods/48.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '京东会员'
                                },
                                {
                                    img: "../public/image/goods/49.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'KEEP会员'
                                },
                                {
                                    img: "../public/image/goods/50.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '去哪儿会员'
                                },
                                {
                                    img: "../public/image/goods/51.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '淘宝天猫会员'
                                },
                                {
                                    img: "../public/image/goods/52.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '携程旅游网会员'
                                },
                            ]
                        }
                     
                    ]
                }
            },
            mounted() {
                this.checkLogin()
            },
            methods: {
                selectMenu(key, keyPath) {

                    console.log(key, keyPath);
                    this.activeIndex = keyPath[0]
                    console.log(this.activeIndex);
                },
                //去登陆
                gotoLogin() {

                    window.location.href = '../login'
                    
                },
                toIndex(){
                    window.location.href = '../index/index.html';
                },
                //检查是否登录
                checkLogin() {
                    this.user = JSON.parse(localStorage.getItem('user'))
                    if (this.user !== null) {
                        this.isLogin = true
                    } else {
                        this.isLogin = false
                        this.gotoLogin()
                    }

                },
                 //去商品页面
                 gotoProduct(item) {

var tempwindow = window.open('_blank');
tempwindow.location = '../product/index.html?' + window.btoa(encodeURI('proInfo=' + JSON
    .stringify(item)));

},

                //退出登录
                logOut() {
                    localStorage.removeItem('user')
                    this.isLogin = false
                    this.user = null
                    this.gotoLogin()
                },

                //删除订单
                delOrder(id) {
                    //所有验证通过
                    const userList = JSON.parse(localStorage.getItem("userList"))
                    const user = JSON.parse(localStorage.getItem("user"))

                    userList.forEach(userItem => {
                        if (userItem.email == this.user.email) {
                             
                          
                                
                            for(let i=0 ;i<userItem.order.length;i++){
                              
                                if(userItem.order[i].id==id){
                                    userItem.order.splice(i,1)
                                    user.order.splice(i,1)
                                    break;
                                }
                            }
                            this.user=user

                            this.$message({
                            message: '删除成功',
                            center: true,
                            type: 'success',
                            offset: 80
                        });

                            localStorage.setItem("userList", JSON.stringify(userList))
                            localStorage.setItem("user", JSON.stringify(user))
                          return

                        } else {
                            this.$message({
                            message: '删除失败',
                            center: true,
                            type: 'error',
                            offset: 80
                        });
                        }
                    });
                }

            }
        })
    </script>
</body>

</html>